<template>
    <div class="warpper">
        <div class="search">
            <div class="search__back iconfont" @click="handleBackClick">&#xe601;</div>
            <div class="search__content">
                <span class="search__content__icon iconfont">&#xe65c;</span>
                <input class="search__content__input"
                        placeholder="请输入商品名称"
                />
            </div>
        </div>
        <shop-info :item="item"/>
        <content :shopName="item.name" />
        <Cart />
    </div>
</template>

<script>
import {reactive, toRefs} from "vue";
import {useRouter, useRoute} from "vue-router";
import {get} from '@/utils/request'
import ShopInfo from "@/components/ShopInfo";
import Content from "@/views/Shop/content";
import Cart from "@/views/Shop/Cart";

//获取当前商店信息
const useShopInfoEffect = () => {
    const route = useRoute();
    const data = reactive({item :{}});
    const getItemData = async () => {
        const result = await get(`/api/shop/${route.params.id}`);
        if(result?.errno ===0 && result?.data){
            data.item = result.data;
        }
    }
    const {item} = toRefs(data)
    return { item, getItemData }
}

//点击回退逻辑
const useBackRouteEffect = () => {
    const router = useRouter();
    const handleBackClick = () => {
        router.back()
        console.log(router)
    }
    return handleBackClick
}

export default {
    name: "Shop",
    components: { Content, ShopInfo, Cart },
    setup() {
        const { item, getItemData } = useShopInfoEffect();
        const handleBackClick = useBackRouteEffect();
        getItemData()
        return { item, handleBackClick }
    }
}
</script>

<style scoped lang="scss">
@import "../../style/viriables";
.warpper {
    padding: 0 .18rem;
}

.search {
    margin: .14rem 0 .04rem 0;
    display: flex;

    &__back {
        width: .3rem;
        line-height: .32rem;
        font-size: .2rem;
        color: #b6b6b6;
    }

    &__content {
        display: flex;
        flex: 1;
        border-radius: .16rem;
        background: #f5f5f5;

        &__icon {
            width: .44rem;
            line-height: .32rem;
            text-align: center;
            color: $search_fontcolor;
        }

        &__input {
            padding-right: .2rem;
            display: block;
            width: 100%;
            border: none;
            outline: none;
            background: none;
            font-size: .14rem;
            color: $search_bgcolor;
            &::placeholder{
                color: $content-fontcolor;
            }
        }
    }
}
</style>